Skip to content

feat(app): add markdown preview/source toggle for file tabs#22057

Closed
alankyshum wants to merge 1 commit into
anomalyco:devfrom
alankyshum:feat/markdown-preview
Closed

feat(app): add markdown preview/source toggle for file tabs#22057
alankyshum wants to merge 1 commit into
anomalyco:devfrom
alankyshum:feat/markdown-preview

Conversation

@alankyshum

Copy link
Copy Markdown

Summary

Adds a Preview / Source toggle for Markdown files in the file viewer tab. When a .md or .markdown file is opened, a sticky toolbar appears with Preview and Source buttons, defaulting to the rendered preview. Clicking a comment automatically switches to Source view for inline annotation.

Continues the work from #13704 by @kimi-chen, reimplemented from scratch against the current dev branch after significant codebase refactoring.

Changes

  • file-tabs.tsx — Added isMarkdown memo, preview signal, comment-focus effect (auto-switches to Source when a comment is focused), sticky toggle toolbar, and <Markdown> rendered preview using the existing @opencode-ai/ui/markdown component
  • i18n — Added session.files.viewPreview and session.files.viewSource keys across all 17 locale files (en, de, es, fr, ja, zh, zht, ar, br, bs, da, ko, no, pl, ru, th, tr)

Design Decisions

  • Binary file guard: The toggle only renders when content type is not binary (state()?.content?.type !== "binary")
  • Comment focus: When a comment is focused on the current file, preview mode auto-switches to Source so the user can see the inline annotation
  • Path change reset: Switching files resets to Preview mode
  • No new dependencies: Reuses the existing <Markdown> component from @opencode-ai/ui/markdown

Credit

This feature was originally proposed and prototyped in #13704 by @kimi-chen. This PR is a clean reimplementation addressing the review feedback from that PR (binary guard, comment focus, i18n coverage).

Co-authored-by: kimi-chen kimi-chen@users.noreply.github.com

Add a Preview/Source toggle for Markdown files in the session file viewer.
Detects .md/.markdown files and defaults to rendered preview mode.
Auto-switches to Source view when navigating to a comment.
Excludes binary files from the toggle.
Includes i18n translations for all 17 supported locales.

Based on work by @kimi-chen in anomalyco#13704.

Co-authored-by: kimi-chen <kimi-chen@users.noreply.github.com>
Co-Authored-By: Paperclip <noreply@paperclip.ing>
@github-actions github-actions Bot added the needs:compliance This means the issue will auto-close after 2 hours. label Apr 11, 2026
@github-actions

Copy link
Copy Markdown
Contributor

This PR doesn't fully meet our contributing guidelines and PR template.

What needs to be fixed:

  • PR description is missing required template sections. Please use the PR template.

Please edit this PR description to address the above within 2 hours, or it will be automatically closed.

If you believe this was flagged incorrectly, please let a maintainer know.

@github-actions

Copy link
Copy Markdown
Contributor

The following comment was made by an LLM, it may be inaccurate:

Potentially Related PR Found:

Why it's related: This is the original PR by @kimi-chen that the current PR (#22057) reimplements. Per the description, PR #22057 "Continues the work from #13704...reimplemented from scratch against the current dev branch after significant codebase refactoring" and incorporates feedback from that PR's review.

@alankyshum alankyshum closed this Apr 11, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

needs:compliance This means the issue will auto-close after 2 hours.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant